<template>
  <div class="data">
    <el-row :gutter="20">
      <el-col :span="24" class="mb10">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-card shadow="never">
              <template v-slot:header>
                <div class="clearfix">
                  <span>系统数据统计</span>
                </div>
              </template>
              <div class="text item text-center">
                <el-row :gutter="20">
                <el-col :span="8">
                  <el-card shadow="hover" class="mb20">
                    <el-link @click="router.push({ name: 'module_business_client_list_list' })" :underline="false">
                      <el-statistic title="全部客户" :value="basic.client_total" />
                    </el-link>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover" class="mb20">
                    <el-link @click="router.push({ name: 'module_business_demand_list_list' })" :underline="false">
                      <el-statistic title="全部需求" :value="basic.demand_total" />
                    </el-link>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover" class="mb20">
                    <el-link @click="router.push({ name: 'module_business_customization_list' })" :underline="false">
                      <el-statistic title="全部定制" :value="basic.customization_total" />
                    </el-link>
                  </el-card>
                </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-card shadow="hover" class="mb20">
                      <el-link @click="router.push({ name: 'module_business_product_list' })" :underline="false">
                        <el-statistic title="产品" :value="basic.product_total" />
                      </el-link>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card shadow="hover" class="mb20">
                      <el-link @click="router.push({ name: 'module_business_example_list' })" :underline="false">
                        <el-statistic title="案例" :value="basic.example_total" />
                      </el-link>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card shadow="hover" class="mb20">
                      <el-link @click="router.push({ name: 'module_business_activity_list' })" :underline="false">
                        <el-statistic title="活动单" :value="basic.activity_total" />
                      </el-link>
                    </el-card>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-card shadow="hover">
                      <el-link @click="router.push({ name: 'module_business_place_list' })" :underline="false">
                        <el-statistic title="基地" :value="basic.place_total" />
                      </el-link>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card shadow="hover">
                      <el-link @click="router.push({ name: 'module_business_teacher_list' })" :underline="false">
                        <el-statistic title="讲师" :value="basic.teacher_total" />
                      </el-link>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card shadow="hover">
                      <el-link @click="router.push({ name: 'module_business_supplier_list' })" :underline="false">
                        <el-statistic title="供应商" :value="basic.supplier_total" />
                      </el-link>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="m-l-10-p-20">
              <template v-slot:header>
                <div class="clearfix">
                  <span>预估业绩统计</span>
                </div>
              </template>
              <div class="text item text-center">
                <el-card shadow="never">
                  <v-chart class="h265" :option="money" :autoresize="true"/>
                </el-card>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="never">
              <template v-slot:header>
                <div class="clearfix">
                  <span>客户数据统计</span>
                </div>
              </template>
              <div class="text item text-center">
                <el-card shadow="hover" class="mb20">
                  <el-link @click="router.push({ name: 'module_business_share_list' })" :underline="false">
                    <el-statistic title="分享数" :value="basic.share_total" />
                  </el-link>
                </el-card>
                <el-card shadow="hover" class="mb20">
                  <el-link @click="router.push({ name: 'module_business_contact_list_list' })" :underline="false">
                    <el-statistic title="开号数" :value="basic.contact_total" />
                  </el-link>
                </el-card>
                <el-card shadow="hover">
                  <el-link @click="router.push({ name: 'module_business_browse_list' })" :underline="false">
                    <el-statistic title="访问量" :value="basic.browse_total" />
                  </el-link>
                </el-card>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" class="mb10">
        <schedule />
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="index">
  import { useBase } from "@/hooks/base/useBase"

  import Schedule from "@/components/schedule/index"

  import { use } from 'echarts/core';
  import { LineChart, BarChart, PieChart, FunnelChart } from 'echarts/charts'; //引入图例
  import { CanvasRenderer } from 'echarts/renderers' //使用canvas渲染，可选使用svg渲染
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';

  use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer
  ]);

  const { router, i18n } = useBase()

  const basic = ref({})

  const money = reactive({
    legend: {orient: 'horizontal', left: 'right', bottom: 'bottom'},
    series: {
      type: 'pie',
      radius: ['30%', '70%'],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{c} 元}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < 100 / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
      data: [],
    },
  });


  // 获取系统基本数据
  const getBasicData = () => {
    $http({
      url: $http.adornUrl('/index/basic'),
      method: 'post',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        basic.value = data.data
      }
    })
  }

  const getMoneyData = () => {
    $http({
      url: $http.adornUrl('/index/money'),
      method: 'post',
      params: $http.adornParams({}),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        money.series.data = data.data
      }
    })
  }

  onMounted(() => {
    getBasicData()
    getMoneyData()
  })

</script>

<style lang="scss" scoped>
.h265 {
  height: 265px;
}
.el-select {
  width: 120px;
}
.chart {
  height: 62vh;
  background: #fff;
}
.clearfix {
  height: 35px;
}
.type {
  float: right;
  padding: 3px 0;
}
</style>
